@layout("/common/_curd/_container.html"){
<style rel="stylesheet" type="text/css">
    .uploadWrapper{
        width: 100%;
        padding: 10px;
        border: 1px #dadada solid;
    }
    .uploadWrapper .selectFile,
    .uploadWrapper .fileItem .delBtn{
        padding: 5px 15px 5px 15px;
        border: 1px #c4c4c6 solid;
        border-radius: 5px;
        margin-right: 15px;
        background-color: #fff;
        cursor: pointer;
    }
    .uploadWrapper .fileList{
        display: none;
    }
    .uploadWrapper .fileItem{
        width: 100%;
        display: flex;
        padding: 5px 0;
        text-align: center;
        border-bottom: 1px #dadada solid;
    }
    .uploadWrapper .fileItem span:not(.delBtn){
        flex: 1;
        margin-right: 15px;
    }
    .uploadWrapper .fileItem .delBtn{
        padding: 2px 15px 2px 15px;
        background-color: #fff;
        cursor: pointer;
        font-size: 12px;
    }
    .uploadWrapper .fileItem span.status{
        /*color: #449d44;*/
        font-size: 12px;
    }
    .uploadWrapper .selectFile:hover,
    .uploadWrapper .fileItem .delBtn:hover{
        background-color: #eee;
    }
</style>

	<form data-url="${basePath}/${code}/save" method="post" class="form-horizontal" role="form">
		<!-- 表单 -->


			<div width="80%">
				<table  class="table table-bordered" >
					<tbody>
					<tr>
						<td width="100px">编号</td>
						<td width="120px" colspan="5">
							<input type="text" name="expert.id" readonly="readonly" value="${uuid}" class="form-control" />
						</td>
						<td width="300px" rowspan="5">
							<div id="show"></div>
							<input id="uploadfiles" type="hidden"/>
							<input id="file_upload" name="uploadfile"  width="100%" type="file" multiple="true" />
							<p id="upload_check"></p>
							<!--<div id="queue"></div>-->
						</td>
					</tr>
					<tr>
						<td width="100px">姓名</td>
						<td width="120px">
							<input type="text" name="expert.name"  placeholder="姓名" class="form-control" />
						</td>
						<td width="120px">性别</td>
						<td width="120px">
							<blade:select type="dict" code="101" name="expert.SEX" value="0" />
						</td>
						<td width="120px">出生年月</td>
						<td width="120px">
							<input type="text" id="birthday" name="expert.BIRTHDAY" class="form-control"  value="" placeholder="请选择出生日期"  />
						</td>

					</tr>
					<tr>
						<td width="100px">职务</td>
						<td width="120px">
							<input type="text" name="expert.job"  placeholder="职务" class="form-control" />
						</td>
						<td width="120px">民族</td>
						<td width="120px">
							<blade:select type="dict" code="103" name="expert.nation" value="0" />
						</td>
						<td width="120px">政治面貌</td>
						<td width="120px">
							<blade:select type="dict" code="104" name="expert.political" value="0" />
						</td>

					</tr>

					<tr>
						<td width="100px">工作单位</td>
						<td width="120px" colspan="5">
							<input type="text" name="expert.workplace"  placeholder="工作单位" class="form-control" />
						</td>
					</tr>

					<tr>
						<td width="100px">身份证号</td>
						<td width="120px" colspan="5">
							<input type="text" name="expert.id_number"  placeholder="身份证号" class="form-control" />
						</td>
					</tr>

					<tr>
						<td width="100px">办公电话</td>
						<td width="120px" colspan="3">
							<input type="text" name="expert.tel"  placeholder="办公电话" class="form-control" />
						</td>
						<td width="120px">手机号码</td>
						<td width="420px" colspan="2">
							<input type="text" name="expert.mobilphone"  placeholder="手机号码" class="form-control" />
						</td>
					</tr>

					<tr>
						<td width="100px">通信地址</td>
						<td width="120px" colspan="3">
							<input type="text" name="expert.address"  placeholder="通信地址" class="form-control" />
						</td>
						<td width="120px">邮政编码</td>
						<td width="420px" colspan="2">
							<input type="text" name="expert.postnumber"  placeholder="邮政编码" class="form-control" />
						</td>
					</tr>

					<tr>
						<td width="100px">住宅电话</td>
						<td width="120px" colspan="3">
							<input type="text" name="expert.homephone"  placeholder="住宅电话" class="form-control" />
						</td>
						<td width="120px">电子信箱</td>
						<td width="420px" colspan="2">
							<input type="text" name="expert.email"  placeholder="电子信箱" class="form-control" />
						</td>
					</tr>

					<tr>
						<td width="100px">学历</td>
						<td width="120px">
							<blade:select type="dict" code="105" name="expert.education" value="0" />
						</td>
						<td width="120px">职称</td>
						<td width="120px">
							<input type="text" name="expert.titles"  placeholder="职称" class="form-control" />
						</td>
						<td width="120px">职称授予时间</td>
						<td width="120px" colspan="2">
							<input type="text" id="getdate" name="expert.getdate" class="form-control"  value="" placeholder="职称授予时间"  />
						</td>

					</tr>

					<tr>
						<td width="220px" colspan="2">突出专业特长、专业造诣和权威</td>
						<td width="780px" colspan="5">
							<input type="text" name="expert.expertise"  placeholder="突出专业特长、专业造诣和权威" class="form-control" />
						</td>
					</tr>

					<tr>
						<td width="220px" colspan="2">专业技术特长</td>
						<td width="780px" colspan="5">
							<input type="text" name="expert.expertise2"  placeholder="专业技术特长" class="form-control" />
						</td>
					</tr>

					<tr>
						<td width="100px">行业领域</td>
						<td width="120px">
							<blade:select type="dict" code="107" name="expert.industry" value="0" />
						</td>
						<td width="120px">专业</td>
						<td width="120px">
							<blade:select type="dict" code="108" name="expert.major1" value="0" />
						</td>
						<td width="120px">二级专业</td>
						<td width="120px" colspan="2">
							<blade:select type="dict" code="108" name="expert.major2" value="0" />
						</td>

					</tr>

					<tr>
						<td width="100px" colspan="1">专业相关工作经历</td>
						<td width="150px" colspan="6">
							<input type="text" name="expert.experience"  placeholder="专业相关工作经历" class="form-control" />
						</td>
					</tr>
					<tr>
						<td width="100px" colspan="1">获奖情况</td>
						<td width="150px" colspan="6">
							<input type="text" name="expert.award"  placeholder="获奖情况" class="form-control" />
						</td>
					</tr>
					<tr>
						<td width="100px" colspan="1">发表专业学术论文或专著及获得专利情况</td>
						<td width="150px" colspan="6">
							<input type="text" name="expert.patent"  placeholder="发表专业学术论文或专著及获得专利情况" class="form-control" />
						</td>
					</tr>
					<tr>
						<td width="100px" colspan="1">所在单位意见</td>
						<td width="150px" colspan="6">
							<input type="text" name="expert.company_suggestion"  placeholder="所在单位意见" class="form-control" />
						</td>
					</tr>
					<tr>
						<td width="100px" colspan="1">审核意见</td>
						<td width="150px" colspan="6">
							<input type="text" name="expert.audit_opinion"  placeholder="审核意见" class="form-control" />
						</td>
					</tr>
					<tr>
						<td width="100px" colspan="1">入库情况</td>
						<td width="150px" colspan="6">
							经     年     月     日   --   年    月     日公示后，无异议，纳入市经信委政府信息化项目评审专家库。
						</td>
					</tr>
					<tr>
						<td width="100px" colspan="1">是否通过审核</td>
						<td width="150px" colspan="6">
							<blade:select type="dict" code="903" name="expert.ispass" value="0" />
						</td>
					</tr>
					<tr>
						<td width="100px" colspan="1">附件上传</td>
						<td width="150px" colspan="6">
                            <div class="uploadWrapper">
                                <label for="upload" class="selectFile">
                                    选择文件<input id="upload" style="display: none;" name="uploadfile" type="file" multiple="true" />
                                    <input type="hidden" name="projects.annex" id="filesName"  class="form-control" />
                                </label>
                                <span style="font-size: 14px;">提示：每个文件大小不超过10Mb，支持格式为*、*、*</span>
                                <ul style="list-style: none;width: 60%;" class="fileList">
                                    <!--<li class="fileItem">
                                        <span>XXXX.doc</span>
                                        <span>0.15MB</span>
                                        <span class="status">上传成功</span>
                                        <span class="delBtn">删除</span>
                                    </li>-->
                                </ul>
                            </div>
							<!--<input type="text" name="expert.annex"  placeholder="附件上传" class="form-control" />-->
						</td>
					</tr>
					</tbody>
				</table>
			</div>
			<input type="submit" name="提交">
    <!--要改-->
		<script src="${basePath}/static/laydate/laydate.js"></script>
		<script type="text/javascript">
			laydate({
				elem: '#birthday',
				format: 'YYYY-MM-DD', // 分隔符可以任意定义，该例子表示只显示年月日
				//festival: true, //显示节日
				choose: function(datas){ //选择日期完毕的回调
					/*   alert('得到：'+datas); */
				}
			});
		</script>
		<script type="text/javascript">
			laydate({
				elem: '#getdate',
				format: 'YYYY-MM-DD', // 分隔符可以任意定义，该例子表示只显示年月日
				//festival: true, //显示节日
				choose: function(datas){ //选择日期完毕的回调
					/*   alert('得到：'+datas); */
				}
			});
		</script>

		<!-- 按钮 -->
		@ include("/common/_curd/_btn.html", {btn_save:"新增", btn_close:"关闭"}) {}
	</form>
    <script type="text/javascript">
        $(document).ready(function(){
            var upload = new UploadFile();
            upload.init();
            function UploadFile() {
                this.fileArr = [];
                this.uploadInput = $("#upload");
                this.fileList = $(".fileList");
                // 初始化
                this.init = function () {
                    var _this = this
                    this.uploadInput.change(function () {
                        if(this.value){
                            this.files.length && _this.selectFile.call(_this,this.files);// 此处可以对文件个数作限制，默认不限制
                            this.value = "";
                        }
                    });
                }
            }

            /**
             * 文件选择并缓存文件信息
             * fileArr  所选文件数组
             */
            UploadFile.prototype.selectFile = function (fileArr){
                var _this = this;
                [].slice.call(fileArr).forEach(function (val,index) {
                    (function (i) {
                        var file = fileArr.item(i);
                        _this.fileArr.push(file);
                        _this.renderFile.call(_this,file,i);
                    })(index);
                });
                this.delFile.call(this);

            }

            /**
             * 文件信息预览
             * file  文件
             */
            UploadFile.prototype.renderFile = function (file,index) {
                var htmlStr = "",
                    maxSize = 10,// 支持文件最大10MB
                    fileSize = file.size,// 文件大小
                    filename = file.name,// 文件名字
                    fileType = filename.split('.').pop();// 文件大小
                if(fileType){// 此处是文件类型，可以作对应的限制，例如 fileType==="png"
                    if(fileSize <= maxSize*1024*1024){// 文件大小限制
                        var size = (fileSize/1024/1024).toFixed(2);
                        htmlStr = "<li class='fileItem'><span>"+filename+"</span><span>"+size+"MB</span><span class='status'>未上传</span><span class='delBtn'>删除</span></li>";
                        this.fileList.append(htmlStr);
                        this.uploadEvent.call(this,file,index);
                        index===0&&this.fileList.show();
                    }
                }
            }

            // 对所选文件进行删除(上传前)
            UploadFile.prototype.delFile = function () {
                var _this = this;
                $(".fileItem > .delBtn").on("click",function () {
                    $(this).parents(".fileItem").remove();
                    _this.fileArr.splice($(this).parents(".fileItem").index(),1);console.log(_this.fileArr);
                });
            }

            /**
             * 文件上传
             *  file   文件
             *  index  文件在缓存文件数组中的索引
             */
            UploadFile.prototype.uploadEvent = function (file,index) {
                var _this = this;
                if(file){
                    var formdata = new FormData();
                    formdata.append("file",file);
                    $.ajax({
                        url:"${basePath}/myproject/view",
                        type:"POST",
                        data:formdata,
                        processData: false,
                        contentType: false,
                        success: function (res) {
                            if(res['flag'] === true ) {
                                if(index === _this.fileArr.length-1){// 所有文件上传完成
                                    _this.fileArr = [];// 清空文件缓存数组
                                    $("#filesName").val(res.names);// 缓存文件名字
                                }
                                $(".fileItem > .status").text("上传成功");
                                $(".fileItem > .status").css("color","#449d44");
                            }
                        }
                    });
                }
            }
        });
    </script>
@}
